<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>品牌商</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-indexed-list.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css"/>

    <style>
        body {
            color: #555;
        }

        .aui-img-object,
        .rec-img {
            width: 45px !important;
            height: 45px !important;
        }

        .aui-img-body {
            height: 45px;
            line-height: 45px;
        }

        .rec-text {
            max-width: width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .aui-img-body,
        .rec-text {
            font-size: 14px;
        }

        /*        body {
                    background-color: #f3f3f3;
                    font-size: 13px;
                }

                .aui-indexed-list-bar {
                    top: 65px;
                }

                .w20 {
                    width: 20%;
                }

                .zfTitle {
                    padding: 8px 10px;
                }

                .aui-searchbar-wrap.fixed {
                    position: static;
                    background: #fff;
                }

                .aui-searchbar {
                    margin: 0;
                }

                #aui-searchbar-input {
                    height: 32px;
                }

                .aui-searchbar-wrap.fixed, .aui-searchbar {
                    height: 32px;
                }

                .aui-indexed-list {
                    top: 0;
                }

                .icon-left-coler {
                    padding-left: 10px;
                }

                .aui-title {
                    line-height: 45px;
                    height: 45px;
                    background: #fff;
                    margin: 0;
                    font-size: 16px;
                }

                .icon-left-coler {
                    z-index: 99;
                    height: 45px;
                    line-height: 45px;
                    position: absolute;
                }

                .shili .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
                    padding: 18px 0;
                }

                .shili .aui-list-view.aui-grid-view {
                    padding-bottom: 5px;
                }

                .shili .aui-list-view-cell {
                    float: left;
                }

                .aui-indexed-list-view li.aui-list-view-cell img {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                    margin-right: 8px;
                    vertical-align: middle;
                }

                .aui-list-view-cell {
                    padding: 6px 15px;
                }*/
        .aui-indexed-list{
            top: 0;
        }
    </style>
</head>
<body>
<header class="aui-searchbar-wrap aui-border-b" id="group-search">
    <div class="aui-searchbar aui-border-radius">
        <i class="aui-iconfont aui-icon-search"></i>

        <div class="aui-searchbar-text">输入首字母</div>
        <div class="aui-searchbar-input">
            <!--<form action="javascript:search();">-->
                <form >
                <input type="text" placeholder="输入首字母" id="aui-searchbar-input">
            </form>
        </div>
        <i class="aui-iconfont aui-icon-roundclosefill" id="aui-searchbar-clear"></i>
    </div>
    <div class="aui-searchbar-cancel aui-text-info" id="aui-searchbar-cancel">取消</div>
</header>

<div class="aui-indexed-list">
    <div class="shili">
        <ul class="aui-list-view aui-indexed-list-view aui-in" data-group="*">
            <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-hot" data-group=" hot">热门推荐</li>
            <li class="aui-list-view-cell">
                <div class="aui-flex-col img-list" id="recommend-content">
                </div>
            </li>
        </ul>
    </div>
    <ul class="aui-list-view aui-indexed-list-view aui-in" data-group="*" id="Brand-content">

        <!--        <script id="Brand-template" type="text/x-dot-template">
                    {{ for(var i in it) { }}
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" data-url="{{=it[i].url}}" onclick="tradeShow();">
                        <img class="aui-img-object" src="{{=it[i].image_src}}">
                        <div class="aui-img-body">
                            {{=it[i].title}}
                        </div>
                    </li>
                    {{ } }}
                </script>-->


        <!--<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-B" data-group="B">B</li>

        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-C" data-group="C">C</li>

        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>-->

    </ul>
    <div class="aui-indexed-list-toast"></div>
    <div class="aui-indexed-list-bar" id="index-content" style="top:60px;">
        <a>
            <i class="aui-iconfont aui-icon-search" data-value="search"></i>
        </a>
        <a>
            <i class="aui-iconfont aui-icon-favorfill" data-value="*"></i>
        </a>    
    </div>
</div>
<script id="index-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <a data-value="{{? i == 0}}A
        {{?? i == 1}}B{{?? i == 2}}C{{?? i == 3}}D{{?? i == 4}}E{{?? i == 5}}F{{?? i == 6}}G{{?? i == 7}}H
        {{?? i == 8}}I{{?? i == 9}}J{{?? i == 10}}K{{?? i == 11}}L{{?? i == 12}}M{{?? i == 13}}N{{?? i == 14}}O
        {{?? i == 15}}P{{?? i == 16}}Q{{?? i == 17}}R{{?? i == 18}}S{{?? i == 19}}T{{?? i == 20}}U{{?? i == 21}}V
        {{?? i == 22}}W{{?? i == 23}}X{{?? i == 24}}Y{{?? i == 25}}Z{{?}}">
        {{? i == 0}}A
        {{?? i == 1}}B{{?? i == 2}}C{{?? i == 3}}D{{?? i == 4}}E{{?? i == 5}}F{{?? i == 6}}G{{?? i == 7}}H
        {{?? i == 8}}I{{?? i == 9}}J{{?? i == 10}}K{{?? i == 11}}L{{?? i == 12}}M{{?? i == 13}}N{{?? i == 14}}O
        {{?? i == 15}}P{{?? i == 16}}Q{{?? i == 17}}R{{?? i == 18}}S{{?? i == 19}}T{{?? i == 20}}U{{?? i == 21}}V
        {{?? i == 22}}W{{?? i == 23}}X{{?? i == 24}}Y{{?? i == 25}}Z{{?}}
    </a>
    {{ } }}
</script>
<script id="recommend-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="aui-flex-item-3" onclick="toBrandList({{=it[i].itemid}},'{{=it[i].title}}')">
        <img class="rec-img" src="{{=it[i].thumb}}">
        <div class="rec-text">{{=it[i].title}}</div>
    </div>
    {{ } }}
</script>
<script id="Brand-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-A" data-group="A">{{? i == 0}}A
        {{?? i == 1}}B{{?? i == 2}}C{{?? i == 3}}D{{?? i == 4}}E{{?? i == 5}}F{{?? i == 6}}G{{?? i == 7}}H
        {{?? i == 8}}I{{?? i == 9}}J{{?? i == 10}}K{{?? i == 11}}L{{?? i == 12}}M{{?? i == 13}}N{{?? i == 14}}O
        {{?? i == 15}}P{{?? i == 16}}Q{{?? i == 17}}R{{?? i == 18}}S{{?? i == 19}}T{{?? i == 20}}U{{?? i == 21}}V
        {{?? i == 22}}W{{?? i == 23}}X{{?? i == 24}}Y{{?? i == 25}}Z{{?}}
    </li>
    {{ for(var b in it[i]) { }}
    <li class="aui-list-view-cell aui-ellipsis-1" onclick="toBrandList({{=it[i][b].itemid}},'{{=it[i][b].title}}')">
        <img class="aui-img-object aui-pull-left" src="{{=it[i][b].thumb}}">
        <div class="aui-img-body">{{=it[i][b].title}}</div>
    </li>
    {{ } }}
    {{ } }}
</script>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/aui-tap.js"></script>
<script type="text/javascript" src="../script/aui-indexed-list.js"></script>
<script type="text/javascript">
    apiready = function () {
        showLoading();
        api.parseTapmode();
        var appVersion = api.appVersion;
        $api.text($api.byId('version'), appVersion);
        var url = 'brand/brandall';
        ajaxRequest(url, 'get', '', function (ret, err) {
            hideLoading();
            if (ret.status == 1) {
                var content = $api.byId('Brand-content');
                var tpl = $api.byId('Brand-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.brand));
                var content = $api.byId('recommend-content');
                var tpl = $api.byId('recommend-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.recommend));

                var content = $api.byId('index-content');
                var tpl = $api.byId('index-template').text;
                var tempFn = doT.template(tpl);
                $api.append(content, tempFn(ret.brand));

            } else {
                api.toast({
                    msg: '网络错误',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        })
    }

    //打开商品列表
    function toBrandList(brand,brandName) {
        api.openWin({
            name: 'brandList_win',
            url: 'brandList_win.html',
            pageParam: {
                brand: brand,
                brandName:brandName
            },
            // delay: 0
        });
    }
    function getHeight() {
        return $(".shili").height();
    }
    var indexedList = new auiIndexedList(getHeight());
    //    function openSearch() {
    //        api.openWin({
    //            name: "search",
    //            url: "search.html",
    //            pageParam: {
    //                type:"pinpaishang"
    //            }
    //        })
    //    }
</script>
</html>